<template>
    <div class="order-detail pt15" >
        <div v-if="order" class="plr15">
            <div class="item plr30 pb25 bgc-fff">
                <div class="c-111 fs-15 pt12">{{order.room_name}}</div>
                <div class="c-999 fs-11 pt3">大床| 可住2人 | 42m | 有窗 | 可吸烟 </div>
                <div class="fs-15 c-111 pt6 kitbox date">
                    <div class=" ">{{order.startDateStr}} {{order.startWeek}}<br><span>14:00后</span></div>
                    <div class="fs-11 plr10"><div class="icon">{{order.days}}晚</div></div>
                    <div class="">{{order.endDateStr}} {{order.endWeek}}<br><span>14:00前</span></div>
                </div>
                <div class="pt4">
                    <span class="fs-13 c-111">订单编号</span>
                    <span class="fs-13 c-626262 ml40">{{order.osn}}</span>
                </div>
                <div class="pt12 kitbox">
                    <div><img class="icon-1" src="/static/images/ren.png" alt=""></div>
                    <div class="fs-14 c-111 pl10">
                        <span>入住人姓名</span>
                        <div class="pt6">会员</div>
                    </div>
                    <div class="fs-14 c-626262 pl24">
                        <span>{{order.name}}</span>
                        <div class="pt6">{{order.cards&&order.cards[0]}}</div>
                    </div>
                </div>
                <div class="pt10 kitbox">
                    <div><img class="icon-1" src="/static/images/dianhua.png" alt=""></div>
                    <div class="fs-14 c-111 pl10">
                        <span>{{order.mobile}}</span>
                        <div class="pt6">押金:  {{order.money}}</div>
                    </div>
                    <div class="fs-14 c-626262 pl40">
                        <span>&nbsp;</span>
                        <div class="pt6">状态:  <span class="c-f55959">{{order.statusStr}}</span></div>
                    </div>
                </div>
                <div class="pt10 kitbox">
                    <div><img class="icon-1" src="/static/images/canshi.png" alt=""></div>
                    <div class="fs-14 c-111 pl10">
                        <span>无餐食</span>
                    </div>
                    <div class="fs-14 c-626262 pl40">
                        
                    </div>
                </div>

                <div class="btns kitbox c-111 fs-13 pt15 tr">
                    <div class="btn" v-if="order.status==1" @click="pay(order)">立即支付</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import orderApi from "@/api/api-order";
import moment from '@/plugins/utils/moment.js'
export default {
    name: "orderDetail",
    components: {

    },
    data(){
        return {
            orderId: "",
            order: "",
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        }
    },
    onLoad(option){   
        this.orderId = option.id
    },
    mounted() {
        this.GetOrder()
    },
    methods: {
        GetOrder(){
            if(!this.orderId){
                return
            }
            orderApi.GetOrder({
                orderId: this.orderId
            }).then(res => {
                res.result.startDateStr = moment(res.result.start_date).format('MM月DD日')
                res.result.endDateStr = moment(res.result.end_date).format('MM月DD日')
                res.result.startWeek = this.weekday[moment(res.result.start_date).weekday()]
                res.result.endWeek = this.weekday[moment(res.result.end_date).weekday()]
                this.order = res.result
            })
        },
        pay(item){
            var vm = this
            wx.showLoading({
                title: '提交中',
            })

            orderApi.PayOrder({
                orderId: item.orderId
            }).then(res => {
                wx.hideLoading({})
                if(res.code == 0){
                    res = res.result
                    wx.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: res.package,
                        signType: res.signType,
                        paySign: res.paySign,
                        success (data) { 
                            wx.setStorageSync("pageReload", 1)
                            wx.showToast({
                                title: '支付成功',
                                icon: 'success',
                                duration: 2000
                            })
                            vm.GetOrder()
                        },
                        fail (res) { 
                            wx.showToast({
                                title: '支付失败',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                    })
                } 
            }).catch(e => {
                wx.hideLoading({})
                wx.showToast({
                    title: '重新支付失败',
                    icon: 'none',
                    duration: 2000
                })
            })
        }
    }
};
</script>
<style lang="scss" scope>
@import './css/detail.scss';
</style>
